<template>
  <div>
    <el-button type="primary">primary 按钮</el-button>
    <el-button type="success">success 按钮</el-button>
    <el-button type="danger">danger 按钮</el-button>
    <el-button type="info">info 按钮</el-button>
    <el-button type="warning">warning 按钮</el-button>
    <span class="text-success">自定义颜色</span>
  </div>
  <div>
    <el-form label-position="left" :label-width="80">
      <el-form-item label="暗黑模式">
        <el-switch v-model="isDark"/>
      </el-form-item>
      <el-form-item label="主色：">
        <el-color-picker v-model="themeConfig.colors.primary"/>
      </el-form-item>
      <el-form-item label="消息色：">
        <el-color-picker v-model="themeConfig.colors.info"/>
      </el-form-item>
      <el-form-item label="成功色：">
        <el-color-picker v-model="themeConfig.colors.success"/>
      </el-form-item>
      <el-form-item label="警告色：">
        <el-color-picker v-model="themeConfig.colors.warning"/>
      </el-form-item>
      <el-form-item label="危险色：">
        <el-color-picker v-model="themeConfig.colors.danger"/>
      </el-form-item>
      <el-button type="primary" @click="updateTheme">适用配置</el-button>
    </el-form>
  </div>
</template>

<script setup>
import {nextTick, ref, watch} from 'vue';
import {useDark} from "@vueuse/core";
import {getTheme, setTheme} from "./utils/theme.js";

const themeConfig = ref(Object.assign({}, getTheme()));
const updateTheme = () => setTheme(themeConfig.value);
const isDark = useDark();
watch(isDark, () => nextTick(() => updateTheme()));
</script>
<style scoped>

</style>